<template>
  <div class="row">
    <!--滑动选择-->
    <div class="col-8 ph"><mu-slider v-model="valuePct" :min="0" :max="100" :step="1"></mu-slider></div>
    <div class="col-4 ph"><input type="text" class="form-control val" v-model="valueNum" :min="0"></div>
  </div>
</template>

<script>

export default {
  name: 'UIValue',
  props: {
    'value': {},
  },
  data () {
    return {
      valuePct: 0,
      valueNum: ''
    }
  },
  mounted: function () {
    this.resolve();
  },
  methods: {
    resolve: function () {
      let value = ((typeof this.value)!=='string') ? this.value.toString() : this.value;
      if (value.indexOf('%')!==-1){
        this.valueNum = value;
        this.valuePct = parseInt(value.replace('%', ''));
      } else {
        this.valueNum = value.replace('px', '');
        this.valuePct = 0;
      }
    }
  },
  watch: {
    'value': function () {
      this.resolve();
    },
    'valuePct': function () {
      this.$emit('childChange', this.valuePct + '%');
    },
    'valueNum': function () {
      this.$emit('childChange', this.valueNum);
    }
  }
}
</script>

<style scoped>
  .val { height: 25px; font-size: 14px; color: #666; width: 60px; border-radius: .05rem; }
  .ph { padding-left: 10px; padding-right: 10px }
</style>
